<template>
	<view class="">
	<!-- 本页 -->
	<scroll-view class="pointslist" scroll-into-view="toView" scroll-y="true" @scroll="scroll"  @scrolltolower="scrolltolower" :scroll-top="scrollTop">
		<view v-for="(item,index) in MeunPage" :key='index' class="style1" @touchstart="start" @touchend="end" @touchmove="Move"  v-if="pageIndex == index" :class="{nextmove: leaveIndex == index + 1 && aState === 'next', lastmove: leaveIndex == index + 1 && aState === 'last'}">
			<view v-html="item"></view>
			<view style="font-size: 13px;opacity: 0.3;letter-spacing: 2px;position: absolute;bottom: 0;padding-bottom: 24px;">左右滑动查看→</view>
		</view>
		<view v-if="pageIndex == MeunPage.length" :class="{nextmove: leaveIndex == MeunPage.length+1 && aState === 'next', lastmove: leaveIndex === MeunPage.length+1 && aState === 'last'}" @touchstart="start" @touchend="end" style="height: 100%;">
			<view  @click="touchMove" style="min-height: 100%;" >
				<!-- 章节名 -->
				<view style="display: flex;align-items: flex-start;padding: 0 1.2rem;margin-top: 15px;margin-bottom: 30px;" v-if="title_style == 2" >
					<view v-if="CoverImg">
						<image :src="CoverImg" style="width: 6.5rem;height: 8rem;border-radius: 0.4rem;"></image>
					</view>
					<view>
						<view style="padding: 0.8rem 1.2rem 0 1.2rem;display: flex;align-items: center;">
							<image src="../../image/img.png" style="width: 22px;height: 23px;"></image>
							<text style="color: #ef8519;font-size: 1.15rem;font-weight: bold;margin-left: 5px;">{{litle_cate}}</text>
						</view>
						<view class="chapter1" v-html="chapterName"></view>
						<view style="padding: 0.2rem 1.2rem;font-size: 0.95rem;font-weight: bold;" v-if="second_title">{{second_title}}</view>
						<view class="author1">{{author}}</view>
					</view>
				</view>
				<view v-else>
					<view style="padding: 0.8rem 1.2rem 0 1.2rem;display: flex;align-items: center;" v-if="litle_cate">
						<image src="../../image/img.png" style="width: 22px;height: 23px;"></image>
						<text style="color: #ef8519;font-size: 1.15rem;font-weight: bold;margin-left: 5px;">{{litle_cate}}</text>
					</view>
					<view class="chapter" v-html="chapterName"></view>
					<view style="padding: 0.2rem 1.2rem;font-size: 0.95rem;font-weight: bold;" v-if="second_title">{{second_title}}</view>
					<view class="author">{{author}}</view>
				</view>
				
				<view class="content">
					<view class="inner-box">
						<view class="book-inner" v-html="text"></view>
					</view>
				</view>
				<view style="width: 100%;padding: 2em;"></view>
			</view>
			<view style="position: absolute;width: 100%;">
				<!-- 评论 -->
				<!-- <view style="display: flex;align-items: center;justify-content: center;">
					<view class="footer" @click="getMent()" >
						<image src="../../image/xiaoxi.png" style="width: 1.3rem;height: 1.2rem;"></image>
						<text v-if="TLength == 0">发表评论</text>
						<text v-else>{{TLength}}条评论</text>
					</view>
				</view> -->
				<!-- <view class="menu-bottom" v-show="ChapterShow">
					<view class="progress-box">
						<text @click="goPreChapter()" style="color: #666666;" v-if="isLast == 0 && isFirst == 0">上一篇</text>
						<text @click="goPreChapter()" style="color: #666666;" v-if="isLast == 1 && isFirst == 0">上一篇</text>
						<text @click="goPreChapter()" style="color: #666666;" v-if="isFirst == 1 && isLast == 0" >上一章</text>
						<text @click="goPreChapter()" style="color: #666666;" v-if="isFirst == 1 && isLast == 1" >上一章</text>
						<view class="item-box" @click="openDirectory">
							<image src="../../image/meun.png" style="width: 1.4rem;height: 1.4rem;"></image>
							<text style="font-size: 0.95rem;color: #666666;margin-top: -0.15rem;">目录</text>
						</view>
						<text @click="goNextChapter" style="color: #666666;" v-if="isLast == 0">下一篇</text>
						<text @click="goNextChapter" style="color: #666666;" v-if="isLast == 1">下一章</text>
					</view>
				</view> -->
			</view>
		</view>
		
	</scroll-view>
	<!-- 菜单层 -->
	<view class="menu" :style="{height: `100%`, width: `100%`}" v-if="menuShow" @touchend="closeMenu">
		<!-- 目录层 -->
		<scroll-view scroll-y="true" class="directory" :class="{container0: background === 1, container1: background === 2}" v-if="directoryShowBefore"
		 :style="{left: directoryShow ? 0 : '-100%',color: `${colorList[background - 1]}`,boxShadow:'0 0 10px 0 rgba(0,0,0,.9)'}" @touchend.stop>
			<view class="bookname">{{bookName}}</view>
			<!-- <Menu></Menu> -->
			<view style="padding: 0 24upx;" >
				<u-collapse :item-style="itemStyle" >
					<u-collapse-item :title="item.key"  v-for="(item, index) in directoryLis" :key="index" :open="MenuOpen">
						<view v-for="(val,ind) in item.data" :key="ind" :class="val.author?'Itemmenu':'Itemmenu_color'" @click="goToChapter(ind,val.book_id,val.article_id)">
							<view :class="val.article_id == articleId ? 'active':'Itemmenu_text'">{{val.title}}</view>
							<!-- <view :class="val.article_id == articleId ? 'active1':'Itemmenu_title'">{{val.author}}</view> -->
						</view>
					</u-collapse-item>
				</u-collapse>
			</view>
		</scroll-view>
		<!-- 上下切换 -->
		<view class="menu-bottom" @touchend.stop>
			<view class="progress-box">
				<view v-if="curChapter.type == 2">
					<text @click="goPreChapter()" style="color: #666666;" v-if="isFirst == 1 && isLast == 0" >上一期</text>
					<text @click="goPreChapter()" style="color: #666666;" v-if="isFirst == 1 && isLast == 1" >上一期</text>
				</view>
				<view v-else>
					<text @click="goPreChapter" style="color: #666666;" v-if="isLast == 0">上一篇</text>
					<text @click="goPreChapter" style="color: #666666;" v-if="isLast == 1">上一章</text>
				</view>
				
				<!-- <text @click="goPreChapter()" style="color: #666666;" v-if="isLast == 0 && isFirst == 0">上一篇</text>
				<text @click="goPreChapter()" style="color: #666666;" v-if="isLast == 1 && isFirst == 0">上一篇</text>
				
				<view v-else>
					<text @click="goPreChapter()" style="color: #666666;" v-if="isFirst == 1 && isLast == 0" >上一章</text>
					<text @click="goPreChapter()" style="color: #666666;" v-if="isFirst == 1 && isLast == 1" >上一章</text>
				</view> -->
				<view class="item-box" @click="openDirectory">
					<image src="../../image/meun.png" style="width: 1.4rem;height: 1.4rem;"></image>
					<text style="font-size: 0.95rem;color: #666666;margin-top: -0.15rem;">目录</text>
				</view>
				<view v-if="curChapter.type == 2">
					<text @click="goNextChapter" style="color: #666666;" v-if="isLast == 0">下一期</text>
					<text @click="goNextChapter" style="color: #666666;" v-if="isLast == 1">下一期</text>
				</view>
				<view v-else>
					<text @click="goNextChapter" style="color: #666666;" v-if="isLast == 0">下一篇</text>
					<text @click="goNextChapter" style="color: #666666;" v-if="isLast == 1">下一章</text>
				</view>
			</view>
		</view>
	</view>
	</view>
</template>

<script>
	import { getbookcata,getarticledetail,getbookcomment } from '../../api/home.js'
	import battery from '../../components/battery.vue'
	import virtualList from '../../components/virtualList.vue'
	import { traditionalized, simplized, dateToStr } from '../../utils/utils.js'
	import Menu from '../book/bookMenu.vue'
	export default {
		components:{
			battery,
			virtualList,
			Menu
		},
		data() {
			return {
				innerHeight:10,
				itemStyle: {
					margin: '10px 0',
					// 'border-bottom': '2px solid #eee'
				},
				MenuOpen:true,
				scrollTop:0,
				old: {
					scrollTop: 0
				},
				bookName: '我是书名',
				bookId: 1,
				articleId:1,
				chapterName:'',
				author:'',
				second_title:'',
				litle_cate:'',
				MeunPage:[],
				TextPage:'',
				title_style:'',
				CoverImg:'',
				ListShow:true,
				history: {  //本书历史记录
					chapterIndex: 0,
					progress: 0
				},
				text:``,
				cover: {    //封面的状态
					pageTranslate: ['', '', ''],  //页面位移，三个数对应三种翻页方式
				},
				next: false,  //用户是否正在翻下一页
				pre: false,  //用户是否正在翻上一页
				
				touchStartX: 0,  // 触屏起始点x
				touchX: 0,  // 瞬时触屏点x
				delta: 0,  // 手指瞬时位移
				
				touchStartY: 0,  // 触屏起始点y
				touchY: 0,  // 瞬时触屏点y
				
				directoryList: [],  //目录列表
				currentPage: 0,   //当前页
				innerHeight: 0,   //截取至整行的最大高度
				curChapter: {},
				tmpChapter: {  //暂存章节内容
					text: '',
					canRead: true
				},
				
				showAnimation: false, //是否开启动画
				showShadow: false, //是否显示页面阴影
				
				menuShow: false,  //菜单栏box是否渲染
				ShowType:0,
				// commentShow:false,//评论
				ChapterShow:false,//目录
				itemShow: false,  // 菜单栏动画控制
				settingShow: false,  //设置栏动画控制
				directoryShow: false,  //目录动画控制
				directoryShowBefore: false,  // 目录渲染
				turnPageTime: .9,  //翻页动画时间
				
				maxFontSize: 30,   //最大字体大小，px
				minFontSize: 14,   //最小字体大小，px
				turnType: 2,  //翻页方式
				fontSize: '',   //字体大小，
				simplified: '',   //是否简体
				lineHeight: '',   //行高，注意是fontSize的倍数
				background: '',    //背景
				colorList: ['#000', '#666'],   //与背景对应的字体颜色

				chapterProgress: 0,   //‘章节进度条’的参数
				progressTouched: false   ,//是否正在点击‘章节进度条’
				i:'0',
				comment:0,
				ind:'',
				isSee:0,
				opacityTip:0,
				TLength:0,
				toView:'',
				clientX: 0,
				clientY: 0,
				oldleft: 0,
				pageIndex: 0,
				leaveIndex: 0,
				scrollState: true,
				aState: 'next',
				resultLenght:0,
				isFirst:0,
				isLast:0,
			}
		},
		onUnload() {
			// #ifdef APP-PLUS
				// 退出全屏
				plus.navigator.setFullscreen(false)
			// #endif
			this.setStorage()
		},
		onHide() {
			this.setStorage()
		},
		onShow: function() {
			document.title = window.localStorage.getItem('Title')
			uni.setNavigationBarTitle({
				title:window.localStorage.getItem('Title')
			})
		},
		mounted() {
			console.log(this.$Route.query)
			this.bookId = this.$Route.query.bookId
			this.articleId = this.$Route.query.articleId
			this.bookName = this.$Route.query.title
			document.title = window.localStorage.getItem('Title')
			uni.setNavigationBarTitle({
				title:window.localStorage.getItem('Title')
			})
			this.initPage()
		},
		computed:{
			progress() {      //章节的阅读进度
				if (this.curChapter.totalPage === 1) {
					return 0
				}
				return this.currentPage / (this.curChapter.totalPage - 1)
			}
		},
		methods: {
			start(e) {
				this.oldleft = e.touches[0].clientX
				// this.showAnimation = false    //关掉动画，否则翻页会很慢
				// this.touchX = e.touches[0].clientX
				// this.touchStartX = e.touches[0].clientX
				// this.touchY = e.touches[0].clientY
				this.touchStartY = e.touches[0].clientY
			},
			Move(e){
				if(!this.scrollState){
					return
				}
				let newleft = e.touches[0].clientX
				let newtop = e.touches[0].clientY
				//下一页
				if(this.oldleft - newleft > 50 || this.touchStartY - newtop > 20){
					this.aState = 'next'
					if(this.pageIndex + 1 > this.MeunPage.length){
						return
						//跳下一页
					}
					this.leaveIndex += 1
					console.log(this.leaveIndex)
					this.scrollState = false
					setTimeout(() =>{
						this.scrollState = true
						this.pageIndex += 1
						if(this.leaveIndex == this.resultLenght){
							this.goNextChapter()
						}
					},500)
				}else if(newleft - this.oldleft > 50 || newtop - this.touchStartY > 20){
					//上一页
					this.aState = 'last'
					if(this.pageIndex - 1 < 0){
						return
					}
					this.pageIndex -= 1
					this.scrollState = false
					setTimeout(() =>{
						this.leaveIndex -= 1
						this.scrollState = true
					},500)
				}
			},
			end(e) {
				
			},
			scroll: function(e) {
				this.opacityTip = 0
				this.old.scrollTop = e.detail.scrollTop
			},
			scrolltolower(e){
				setTimeout(() => {
					this.ChapterShow = true
				},2500)
			},
			onReachBottom(){
				console.log('12121')
			},
			// 评论
			getMent(){
				this.$Router.push({name:'bookMent',params: {articleId:this.articleId}})
			},
			setStorage() {
				let history = uni.getStorageSync('history')
				if (typeof history !== 'object') {
					history = []
				}
				let have = false
				history.forEach((value) => {
					if (value.bookId === this.bookId) {
						have = true
						value.chapterIndex = this.curChapter.chapterIndex
						value.progress = this.progress
					}
				})
				if (!have) {
					history.push({
						bookId: this.bookId,
						chapterIndex: this.curChapter.chapterIndex,
						progress: this.progress
					})
				}
				uni.setStorageSync('history', history)
			},
			
			/**
			* 返回上一页面
			**/
			back() {
				uni.navigateBack()
			},
			
			/**
			* 获取数据并计算页面
			**/
			async initPage() {
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				await this.getDirectoryList()
				
				uni.hideLoading()
				
			},
			/**
			* 触摸
			**/
			touchMove(e) {
				if(this.ChapterShow == true){
					this.ChapterShow = false
				}else{
					this.showShadow = true;
					this.menuShow = true;
				}
				// this.commentShow = true
				// this.showMenu()
			},
			
			/**
			* 呼出菜单
			**/
			showMenu() {
				// #ifdef APP-PLUS
					plus.navigator.setFullscreen(false);
				// #endif
				this.menuShow = true;
				setTimeout(() => {
					this.itemShow = true
				},100)
			},
			/**
			* 关闭菜单
			**/
			closeMenu() {
				// this.ShowType = 1
				// #ifdef APP-PLUS
					plus.navigator.setFullscreen(true);
				// #endif
				this.itemShow = false
				this.settingShow = false
				this.directoryShow = false
				setTimeout(() => {
					this.directoryShowBefore = false
					this.menuShow = false
				},300)
				if(this.ChapterShow == true){
					this.ChapterShow = false
				}
			},
			
			/**
			* 关闭菜单栏，呼出设置栏
			**/
			openSetting() {
				this.itemShow = false
				setTimeout(() => {
					this.settingShow = true
				},300)
			},
			
			/**
			* 关闭菜单栏，呼出目录栏
			**/
			openDirectory() {
				// #ifdef APP-PLUS
					plus.navigator.setFullscreen(true);
				// #endif
				this.itemShow = false
				this.menuShow = true
				this.directoryShowBefore = true
				// if(this.commentShow == true){
				// 	this.commentShow = false
				// }
				this.toView = this.$Route.query.articleId
				setTimeout(() => {
					this.directoryShow = true
				},300)
				
			},

			/**
			* 跳转上一章
			**/
			goPreChapter(page) {
				if (this.curChapter.prev_page == '') {
					uni.showToast({
						title: '已经到头了',
						icon: 'none'
					})
				}else {
					uni.showLoading({
						title: '正在准备'
					})
					var url = this.curChapter.prev_page
					var cs = url.split('?')[1];
					if (cs.length > 0){
						var cc =cs.split('&')[0];//获取bookId
						var cs1 = cs.split('&')[1];//获取articleId
					}
					var bookId = cc.split('=');
					var articleId = cs1.split('=');
					this.bookId = bookId[1]
					this.articleId = articleId[1]
					this.getThreeChapter(bookId[1],articleId[1])
					this.scrollTop = this.old.scrollTop
					this.$nextTick(function() {
						this.scrollTop = 0
					});
					this.waitForPreChapter = true
				}
			},
			/**
			* 跳转下一章
			**/
			goNextChapter() {
				if (this.curChapter.next_page == '') {
					uni.showToast({
						title: '已经没有了',
						icon: 'none'
					})
				}else {
					uni.showLoading({
						title: '正在准备'
					})
					var url = this.curChapter.next_page
					var cs = url.split('?')[1];
					if (cs.length > 0){
						var cc =cs.split('&')[0];//获取bookId
						var cs1 = cs.split('&')[1];//获取articleId
					}
					var bookId = cc.split('=');
					var articleId = cs1.split('=');
					this.bookId = bookId[1]
					this.articleId = articleId[1]
					this.getThreeChapter(bookId[1],articleId[1])
					this.scrollTop = this.old.scrollTop
					this.$nextTick(function() {
						this.scrollTop = 0
					});
					this.waitForNextChapter = true
				}
				
			},
			
			/**
			* 跳转到指定章节
			**/
			async goToChapter(index,bookId,articleId) {
				this.i = index
				this.progressTouched = false
				this.bookId = bookId
				this.articleId = articleId
				this.toView = articleId
				this.closeMenu()
				uni.showLoading({
					title: '加载中'
				})
				await this.getThreeChapter(bookId,articleId)
				// this.goToPage(0)
				uni.hideLoading()
			},
			getThreeChapter(bookId,articleId){
				var that  = this
				var parem = {
					book_id:bookId,
					article_id:articleId
				}
				getarticledetail(parem).then(res =>{
					if(res.data.isFirst == 1){
						that.$nextTick(() => {
							that.pageIndex  = 0
							that.leaveIndex = 0
							if(res.data.cateContent){
								console.log('11111111111')
								var PageText = res.data.cateContent
								var result = PageText.split( "<page></page>" );
								that.resultLenght = result.length
								that.MeunPage = result
								console.log(that.MeunPage)
								// that.TextPage = result[1]
							}else{
								console.log(that.MeunPage.length)
								that.pageIndex  = that.MeunPage.length
								that.curChapter = res.data
								that.chapterName = that.preText(res.data.title) 
								that.second_title = res.data.second_title
								that.author = res.data.author
								that.title_style = res.data.title_style
								that.CoverImg = res.data.cover
								that.litle_cate = res.data.litle_cate
								that.text = res.data.content
							}
							that.curChapter = res.data
							that.isFirst = res.data.isFirst
							that.isLast = res.data.isLast
							uni.hideLoading()
						})
					}else if(res.data.isFirst == 0){
						that.$nextTick(() => {
							that.pageIndex  = that.MeunPage.length
						})
						that.curChapter = res.data
						that.chapterName = that.preText(res.data.title) 
						that.second_title = res.data.second_title
						that.author = res.data.author
						that.title_style = res.data.title_style
						that.CoverImg = res.data.cover
						that.litle_cate = res.data.litle_cate
						that.text = res.data.content
						that.isFirst = res.data.isFirst
						that.isLast = res.data.isLast
						uni.hideLoading()
					}
					
				})
				
			},
			preText (pretext) {
			    return pretext.replace(/\r\n/g, '<br/>').replace(/\n/g, '<br/>').replace(/\s/g, '&nbsp;')
			},
			/**
			* 获取目录
			**/
			getDirectoryList(showLoading) {
				var that = this
				var parem = {
					book_id:that.bookId,
					article_id:that.articleId
				}
				getarticledetail(parem).then(res =>{
					// that.MeunPage = result
					if(res.data.isFirst == 1){
						that.$nextTick(() => {
							that.pageIndex  = 0
							that.leaveIndex = 0
							if(res.data.cateContent){
								console.log('11111111111')
								var PageText = res.data.cateContent
								var result = PageText.split( "<page></page>" );
								that.resultLenght = result.length
								that.MeunPage = result
							}else{
								console.log('22222222222')
								that.pageIndex  = that.MeunPage.length
								that.curChapter = res.data
								that.chapterName = that.preText(res.data.title) 
								that.second_title = res.data.second_title
								that.author = res.data.author
								that.title_style = res.data.title_style
								that.CoverImg = res.data.cover
								that.litle_cate = res.data.litle_cate
								that.text = res.data.content
							}
							that.curChapter = res.data
							that.isFirst = res.data.isFirst
							that.isLast = res.data.isLast
							uni.hideLoading()
						})
					}else if(res.data.isFirst == 0){
						that.$nextTick(() => {
							that.pageIndex  = that.MeunPage.length
						})
						that.curChapter = res.data
						that.chapterName = that.preText(res.data.title) 
						that.second_title = res.data.second_title
						that.author = res.data.author
						that.title_style = res.data.title_style
						that.CoverImg = res.data.cover
						that.litle_cate = res.data.litle_cate
						that.text = res.data.content
						that.isFirst = res.data.isFirst
						that.isLast = res.data.isLast
						uni.hideLoading()
					}
					
				})
				
				if (showLoading) {
					uni.showLoading({
						title: '加载中',
						mask: true
					})
				}
				
				return new Promise((resolve, reject) => {
					// 模拟网络时间
					setTimeout(() => {
						if (showLoading) {
							uni.hideLoading()
						}
						var parem = {
							book_id:this.bookId
						}
						getbookcata(parem).then(res =>{
							this.directoryLis = res.data
							resolve()
						})
						
						
					}, 300)
					
				}).then(() => {}, ()=> {
					
					// 此处是网络连接失败的逻辑
					uni.hideLoading()
					return new Promise((resolve, reject)=> {
						uni.showModal({
							title: '连接失败',
							content: '请检查您的网络状态',
							confirmText: '重试',
							success: async(res) => {
								if (res.confirm) {
									//用户点击了重试
									await this.getDirectoryList(true)
									resolve()
								} else if (res.cancel) {
									//用户点击取消
									this.back()
								}
							}
						})
					})
					
				})
			},
			/**
			* 获取一章数据
			**/
			getOneChapter(chapterId, showLoading) {
				
				if (showLoading) {
					uni.showLoading({
						title: '加载中',
						mask: true
					})
				}
				
				return new Promise((resolve, reject) => {
					// 模拟网络时间
					setTimeout(() => {
						
						if (showLoading) {
							uni.hideLoading()
						}
						
						if (chapterId<500) {
							this.tmpChapter.text = `<p>${chapterId}</p>` + this.text  //模拟数据
							
							// 根据业务实际情况判断该用户是否可阅读,逻辑后端判断
							this.tmpChapter.canRead = true
						}
						else {
							this.tmpChapter.text = ''  //注意：不能阅读章节请赋值为空字符串
							
							// 根据业务实际情况判断该用户是否可阅读,逻辑后端判断
							this.tmpChapter.canRead = false
						}
 						
						
						if (this.simplified === 2) {   //切换为繁体  注意：这里默认数据库中是简体字
							this.tmpChapter.text = traditionalized(this.tmpChapter.text)
						}
						
						resolve()
					}, 300)
				}).then(() => {}, ()=> {
					
					// 此处是网络连接失败的逻辑
					uni.hideLoading()
					return new Promise((resolve, reject)=> {
						uni.showModal({
							title: '连接失败',
							content: '请检查您的网络状态',
							confirmText: '重试',
							success: async(res) => {
								if (res.confirm) {
									//用户点击了重试
									await this.getOneChapter(chapterId, true)
									resolve()
								} else if (res.cancel) {
									//用户点击取消
									this.back()
								}
							}
						})
					})
					
				})
			},
		},
		beforeRouteLeave(to, from, next) {
		    let position = window.scrollY  //记录离开页面的位置
		    if (position == null) position = 0
		    this.$store.commit('changeRecruitScrollY', position) //离开路由时把位置存起来
		    next()
		  },
		  watch: {
		    '$route' (to, from) {
		      if (to.name === 'NewRecruit') {//跳转的的页面的名称是"NewRecruit",这里就相当于我们listview页面，或者原始页面
		        let recruitScrollY = this.$store.state.recruitScrollY
		        window.scroll(0, recruitScrollY)
		      }
		    }
		  }

	}
</script>

<style lang="scss" scoped>
	@keyframes nextmove{
		0%{
			transform: rotateY(0);
			transform-origin: left top;
			// border: 1px solid white;
			box-sizing: border-box;
		}
		100%{
			transform: rotateY(90deg) skew(0,-5deg);
			transform-origin: left top;
			// border: 1px solid white;
			box-sizing: border-box;
		}
	}
	@keyframes lastmove{
		0%{
			transform: rotateY(90deg) skew(0,-5deg);
			transform-origin: left top;
			// border: 1px solid white;
			box-sizing: border-box;
		}
		100%{
			transform: rotateY(0);
			transform-origin: left top;
			// border: 1px solid white;
			box-sizing: border-box;
		}
	}
	.nextmove,.lastmove{
		animation-timing-function: linear; /*动画的速度曲线*/
		animation-iteration-count: 1;  /*动画播放的次数*/
		animation-duration: 600ms;
		animation-fill-mode:forwards;
	}
	.lastmove{
		animation-name: lastmove;
	}
	.nextmove{
		animation-name: nextmove;
	}
	// height:calc(100vh - 1rpx);
	.pointslist{background: #e9e3d9;width: 100%;height:calc(100vh - 1rpx);}
	.author{
		padding: 0 1.2rem;font-size: 1rem;color:#666;margin-bottom: 1.1rem;
	}
	.author1{
		padding: 0 1.2rem;font-size: 0.85rem;color:#666;
	}
	.style1{
		min-height: 100vh;padding: 1rem 1.2rem;display: flex;align-items: center;justify-content: center;
	}
	.style2{
		transform:scale(0.9,0.9);
		box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.2);
		min-height: 90%;padding: 1rem 1.2rem;
	}
	.Itemmenu{
		display: flex;
		flex-direction: column;
		padding: 27upx 0 27upx 0;
		line-height: 1.6rem;
		width: 100%;
		border-bottom: 3upx solid #eee;
	}
	.Itemmenu_color{
		display: flex;
		flex-direction: column;
		padding: 27upx 0 27upx 0;
		width: 100%;
		border-bottom: 3upx solid #eee;
	}
	.Itemmenu_text{
		font-family: 'PingFangSC-Regular', 'Source Han Sans CN' !important;
		font-size: 0.9rem;
		color: #333333;
		overflow: hidden;
		-webkit-line-clamp:1;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		width: 90%;
	}
	.Itemmenu_title{
		font-family: 'PingFangSC-Regular', 'Source Han Sans CN' !important;
		font-size: 0.9rem;
		color: #999999;
		overflow: hidden;
		-webkit-line-clamp:1;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
	}
	/deep/.uni-scroll-view-content{
		min-height: 100% !important;
		height: auto !important;
	}
	page{
		position: relative;
		width: 100%;
		height: 100%;
		height:calc(100vh - 1rpx);
	}
	.chapter{
		font-size: 1.25rem;
		width: 100%;
		font-weight: bold;
		text-align: left;
		padding: 1rem 1.2rem 0.4rem 1.2rem;
	}
	.chapter1{
		font-size: 1.25rem;
		width: 100%;
		font-weight: bold;
		text-align: left;
		padding: 0.5rem 0rem 0.4rem 1.2rem;
		height: 4.5rem;
	}
	.book-inner{
		// text-indent: 2em;
		font-size: 1rem;
		line-height: 1.5rem;
		padding:0 1.2rem;
		text-align:justify;
		display: flex;
		// align-items: center;
		flex-direction: column;
	}
	.container{
		position: fixed;
		top: 0;
		left: 0;
		display: flex;
		flex-flow: column nowrap;
		justify-content: center;
		align-items: center;
		padding: 0px 15px;
		height: 100%;
		width: 100%;
		background-color: #fff;
		// overflow: hidden;
		height:calc(100vh - 1rpx);
		
		.bottom-bar{
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 14px;
			color: $minor-text-color;
			height:20px;
			width: 100%;
		}
		.content{
			flex: 1 1 auto;
			overflow: hidden;
			width: 100%;
			height: calc(100vh - 1rpx);
			.inner-box{
				// overflow: hidden;
				
			}
		}
		
	}
	.container0{
		background: #e9e3d9;
		height:calc(100vh - 1rpx);
	}
	.container1{
		background-color: #000;
		height:calc(100vh - 1rpx);
	}
	.directory-listItem{
		display: flex;
		align-items: center;
		flex-direction: column;
		padding-left: 10px;
		// height: 40px;
		font-size: 14px;
		// border-bottom: #eee solid 1px;
	}
	._menu-bottom{
		width: 100%;
		background-color: #f6f4f0;
		transition: bottom .3s;
		color: #fff;
		border-radius: 5px;
		// margin-bottom: 12px;
		._show-chapter{
			position: absolute;
			left: 50%;
			top: 0;
			transform: translate(-50%, -110%);
			padding: 5px 10px;
			line-height: 20px;
			border-radius: 10rpx;
			font-size: 12px;
			background-color: #666;
		}
		._progress-box{
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 20px;
			// height: 50px;
			// width: 100%;
			font-size: 13px;
			height: 3.2rem;
		}
		.item-box{
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
		}
	}
	.menu-bottom{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 90%;
		background-color: #f6f4f0;
		transition: bottom .3s;
		color: #fff;
		margin-left: 18px;
		border-radius: 5px;
		margin-bottom: 12px;
		.show-chapter{
			position: absolute;
			left: 50%;
			top: 0;
			transform: translate(-50%, -110%);
			padding: 5px 10px;
			line-height: 20px;
			border-radius: 10rpx;
			font-size: 12px;
			background-color: #666;
			margin-top: -10px;
		}
		.progress-box{
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 20px;
			// height: 50px;
			// width: 100%;
			font-size: 13px;
			height: 3.2rem;
		}
		.item-box{
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
		}
	}
	.menu{
		position: fixed;
		top: 0;
		left: 0;
		z-index: 300;
		// transition: all .3s;
		.menu-top{
			position: absolute;
			left: 0;
			width: 100%;
			background-color: #333;
			transition: top .3s;
			.head{
				position: relative;
				display: flex;
				justify-content: center;
				align-items: center;
				height: 40px;
				width: 100%;
				line-height: 40px;
				color: #fff;
			}
			.back{
				position: absolute;
				top: 0;
				left: 10px;
			}
		}
		.directory{
			position: absolute;
			top: 0;
			display: flex;
			flex-flow: column;
			width: 20rem;
			height: 100%;
			transition: left .1s;
			background: #FFFFFF;
			height:calc(100vh - 1rpx);
			padding: 0 10upx 0 0;
			.listItem_text{
				line-height: 1.3rem;
				border-bottom: 4upx solid #EEEEEE;
				margin-bottom: 1rem;
				width: 100%;
			}
			.up_img{
				width: 1.6rem;height: 1.6rem;
			}
			.up_img_color{
				width: 1.6rem;height: 1.6rem;
				transform: rotateX(180deg);
			}
			.style2{
				display: none;
			}
			.bookname{
				padding: 20upx 0 0 20upx;
				height: 60upx;
				font-size: 1.2rem;
				font-weight: bold;
				display: flex;
				align-items: center;
			}
			.bookname_name{
				font-size: 1.05rem;
				color: #3ebcc8;
				font-weight: bold;
				overflow: hidden;
				-webkit-line-clamp:1;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-box-orient: vertical;
			}
			.active{
				font-family: 'PingFangSC-Regular', 'Source Han Sans CN' !important;
				font-size: 1.05rem;
				color: #3ebcc8 !important;
				overflow: hidden;
				-webkit-line-clamp:1;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-box-orient: vertical;
			}
			.active1{
				font-family: 'PingFangSC-Regular', 'Source Han Sans CN' !important;
				font-size: 0.9rem;
				color: #3ebcc8 !important;
				overflow: hidden;
				-webkit-line-clamp:1;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-box-orient: vertical;
			}
			.bookname_title{
				font-size: 1rem;
				color: #666666;
				margin: 1rem 0.6rem ;
				overflow: hidden;
				-webkit-line-clamp:1;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-box-orient: vertical;
			}
			
		}
		
		.setting{
			position: absolute;
			left: 0;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			padding: 10px 20px;
			width: 100%;
			color: #fff;
			background-color: #333;
			transition: bottom .3s;
			.item{
				display: flex;
				align-items: center;
				height: 70px;
				.item-name{
					padding: 10px;
					color: #fff;
					font-size: 14px;
				}
				.icon{
					margin-right: 10px;
					padding: 5px 20px;
					font-size: 15px;
					height: 32px;
					line-height: 20px;
					width: auto;
					text-align: center;
					border-radius: 20px;
					border: #fff solid 1px;
				}
				.type-setting{
					display: flex;
					flex-direction: column;
					justify-content: space-around;
					align-items: center;
					margin-right: 10px;
					padding: 5px;
					height: 30px;
					width: 30px;
					border-radius: 5px;
					border: #fff solid 1px;
					.line{
						width: 100%;
						border-bottom: #fff solid 1px; 
					}
					.lineActive{
						width: 100%;
						border-bottom: #FF9900 solid 1px; 
					}
				}
				.active{
					color: #FF9900;
					border: #FF9900 solid 1px;
				}
			}
		}
	}
	.cover{
		image{
			height: 400rpx;
			width: 300rpx;
			background-color: #eee;
		}
	}
	.footer{
		// position: fixed;
		background: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
		bottom: 0;
		border-top: 1px solid #EEEEEE;
		width: 100%;
		height: 3.2rem;
		border-radius: 0.2rem;
		text{
			font-size: 1rem;
			color: #333333;
			margin-left: 0.5rem;
		}
	}
</style>